<template>
  <div id="">
    <h2 v-title="'修改银行卡'"></h2>
    <ul class="formUl">
      <li>
        <span>持卡人</span>
        <input type="text" name="" v-model="cardTruename" placeholder="输入持卡人姓名">
      </li>
      <li>
        <span>卡号</span>
        <input type="number" name="" v-model="cardNo" placeholder="输入银行卡号">
      </li>
      <li>
        <span>开户行</span>
        <p @click="chooseBanks">
          {{bank.bankName}}
          <img src="@/assets/images/right-icon@2x.png" alt="" width="10">
        </p>
      </li>
    </ul>
    <div class="p10">
      <button type="button" name="button" class="blockBtn" @click="submitBank">保存</button>
    </div>

    <mt-popup
      v-model="popupBanklist"
      position="right" style="width:90%; height:90vh; overflowY:scroll">
      <bankList @chooseBank="chooseBank"></bankList>
    </mt-popup>
  </div>
</template>
<script>
import bankList from './template/bankList.vue';
import {Toast,MessageBox} from 'mint-ui';
import {reLoginWX} from '@/util/util.js';
export default {
  name: "",
  data: () => ({
    cardTruename:'',
    cardNo:'',
    cardId:'',
    popupBanklist:false,
    bank:{bankName:'选择开户行'},    //选择的银行
  }),
  components: {
    bankList,
  },
  methods: {
    chooseBanks() {
      this.popupBanklist = true;
    },
    chooseBank(data){
      console.log(data);
      this.popupBanklist = false;
      this.bank = data;
    },
    submitBank(){
      let that = this;
      let cardTruename = that.cardTruename;
      if (cardTruename=='') {
        Toast('请输入持卡人姓名');
        return false;
      }
      let cardNo = that.cardNo;
      if(cardNo==''){
        Toast('请输入银行卡号');
        return false;
      }
      let bankId = that.bank.bankId;
      if(bankId==null || bankId==undefined){
        Toast('请选择开户行');
        return false;
      }
      let bankParam = {
        cardTruename:cardTruename,
        cardNo:cardNo,
        bankId:bankId,
        cardId:that.cardId
      }
      network.post(configUrl.EDITUSERCARD_URL,bankParam,function(res){
        console.log(res);
        if(res.code==401) {
          reLoginWX();
        }else if(res.code == 200){
          MessageBox.alert('银行卡修改成功!').then(action=>{
            that.$router.go(-1);
          })

        }
      },function(err){
        console.log(err);
      });
    }
  },
  mounted() {
    //do something after mounting vue instance
    let that = this;
    let bankcard = that.$route.query.bankcard;
    that.cardTruename = bankcard.cardTruename;
    that.cardNo = bankcard.cardNo;
    that.bank = bankcard;
    that.cardId = bankcard.cardId;
  }
}
</script>
<style lang="scss" scoped>

.formUl{
  margin-bottom: 20px;
  li{
    @include flex;
    justify-content: space-between;
    padding:10px 20px;
    border-bottom: 1px solid $borderColor;
    color: $grayColor;
    span{
      color: $blackColor;
      font-size: 1.1rem;
    }
    input{
      max-width: 60%;
      text-align: right;
      border:none;
    }
  }
}
</style>
